<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>安质环责任书</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
	
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
		<link rel="stylesheet" href="../formal/css/quill.css" />
		<style>
			.signform{
        padding: 20px 0;
      }
      .signform .btn{
        padding: 15px 0;
        width: 100%;
        display: inline-block;
        text-align: center;
        border-radius: 6px;
      }
      .signform img{
        width: 6.25rem;
		/*
        transform:rotate(-90deg);
        -moz-transform:rotate(-90deg);
        -webkit-transform:rotate(-90deg);
		*/
      }
      .signform .border-bottom{
        border-bottom: 1px solid #dcdcdc;
      }	
	  .padding{
		  padding:0.94rem 8%
	  }
	  body{background:#fff;}
	  ul,li{list-style: none;width:100%;padding:0;}
	  li{font-size:14px;color:#8f8f94;padding:0;}
	  p{display: block;}
	  .wxk{height:5vh;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">安质环责任书</h1>
		</header>
		<div class="wxk"></div>
		<div class="mui-content bg-white padding-bottom" id="container">
			<div class="padding">
					<div style="width: 86%;margin:0 7%;text-align:center;height:50px;line-height: 40px;
					border-bottom:1px dashed #ABAAAA">外来人员安质环责任书</div>
			  <div class="signform" v-html="html"></div>
					<div class="tijiaocns" v-if="tijiaocns">
			  <div class="signform flex">
			    <div>签名：</div>
			    <div class="flex-sub border-bottom text-center" @click="sign()">
			      <img :src="signImg" >
			    </div>
			  </div>
			  <div class="signform flex">
			    <span class="bg-blue text-white btn" @click="submit()">保存提交</span>
			  </div>
					</div>
			</div>
		</div>
	</body>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="../../../js/vue.js"></script>
	<script src="../js/mkeyplus.base.js"></script>
	<script src="../formal/js/api.js"></script>
	<script>
		var page = null;
		var htapi = new HTGlobal();
		mui.init()
		page = new Vue({
			el: '#container',
			data:{
				html:'',
				tijiaocns:false,
				time:'',
				signImg:'',
				form:{
					pactContent:'',
					signature:'',
					projectId:'',
					appUserId:'',
					compellation:'',
					pactId:''
				}
			},
			methods: {
				nowDate(){
				  var date = new Date()
				  var year = date.getFullYear()
				  	
				  /* 在日期格式中，月份是从0开始的，因此要加0
				   * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				   * */
				  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
				  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
				  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
				  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
				  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
				  // 拼接
				  this.time = year + '年' + month + '月' + day + '日'
				},
				sign(){
				  
				  mui.openWindow({
				    url: '../sign/index.html',
				    id: '../sign/index.html',
				  });
				},
				submit() {
				  var _this=this
				  if(_this.signImg==''){
				      mui.toast('请签名');
				      return false;
				  }
				  this.form.pactContent = this.html;
				  this.form.signature = this.signImg.replace(/^data:image\/\w+;base64,/,'');
				  var user = localStorage.getItem('outUser');
				  if(user){
					user = JSON.parse(user);  
					this.form.enterpriseProjectId = user.enterpriseProjectId;
				  }
				  
				  htapi.fetch(this.form,function(data){console.log(JSON.stringify(data))
				  			  if(data.code=='0'){
								  mui.fire(plus.webview.currentWebview().opener(),'reload',false)
				  				  plus.webview.currentWebview().close();
				  			  }else{
				  				  mui.toast(data.msg)
				  			  }
				  },'保存中','submitSafetyRing','post')
				  console.log(localStorage.getItem("token"))
				  localStorage.removeItem('dataURL');
				}
			},
			created: function() {
				if(localStorage.getItem('dataURL')){
				  this.signImg=localStorage.getItem('dataURL');
				}
				this.nowDate()
			}
		})
		window.addEventListener("signUrl", function(e) {
		  console.log(JSON.stringify(e))
		  page.signImg=e.detail.dataURL
		});
		mui.plusReady(function(){
			var user = localStorage.getItem('outUser');
			if(user){
				user = JSON.parse(user);
				
				page.form.compellation = user.compellation;
				page.form.appUserId = user.id;
				page.form.projectId = user.currentProjectId;
				
				plus.nativeUI.showWaiting('加载中');
				
				var actionSign = function(){
				//未签写
				htapi.apiUrl[htapi.apiKey].temporary = htapi.apiUrl[htapi.apiKey].getSafetyRing+user.currentProjectId;
				htapi.fetch({
				projectId:user.currentProjectId},function(res){
					console.log('res........',JSON.stringify(res));
					plus.nativeUI.closeWaiting();
					if(res.code=='0'){
						page.tijiaocns = true;
						page.form.pactId = res.data.pactId;
						var cont = res.data.content;
						cont = cont.replace('{#username#}',user.compellation)
						cont = cont.replace('{#company#}',user.enterpriseName || '')
						if(!user.content)user.content = '';
						cont = cont.replace('{#content#}',user.content||'')
						cont = cont.replace('{#phone#}',user.phone)
						cont = cont.replace('{#signature#}','<span style="color:#fff">{#signature#}</span>')
						cont = cont.replace(new RegExp('{#date#}',"g"),page.time)
						cont = cont.replace(new RegExp('{#year#}',"g"),new Date().getFullYear())
						cont = cont.replace(new RegExp('{#stationName#}',"g"),res.data.stationName)
						cont = cont.replace(new RegExp('{#areaName#}',"g"),res.data.areaName)
						page.html = cont;
					}
					delete htapi.apiUrl[htapi.apiKey].temporary;
				},false,'temporary');
				return;
				},
				actionHasSign = function(){
					htapi.fetch({appUserId:user.id,
					enterpriseProjectId:user.enterpriseProjectId},function(res){
					console.log('res........1',JSON.stringify(res));
						plus.nativeUI.closeWaiting();
						if(res.code=='0'){
							var cont = res.data.pactContent;
							//显示签名图片
							cont = cont.replace('{#signature#}',user.compellation+'<br>'+
							'<img style="width:8%" id="loadtu" src="../sign/loading.gif" /><img onload="imgload()" width="50%" src="'+htapi.filePath+res.data.signatureId+'?token='+localStorage.getItem('token')+'"/><br>')
							cont = cont.replace('{#company#}',user.enterpriseName || '')
							if(!user.content)user.content = '';
							cont = cont.replace('{#content#}',user.content || '')
							cont = cont.replace('{#phone#}',user.phone)
							cont = cont.replace(new RegExp('{#date#}',"g"),page.time)
							cont = cont.replace(new RegExp('{#year#}',"g"),new Date().getFullYear())

							cont = cont.replace(new RegExp('{#stationName#}',"g"),res.data.stationName)
							cont = cont.replace(new RegExp('{#areaName#}',"g"),res.data.areaName)
							cont = cont.replace(new RegExp('{#username#}',"g"),user.compellation)
							page.html = cont;
						}
					},false,'findSaftyRing','post')
					return;
				}
				
				
				htapi.fetch({appUserId:user.id,enterpriseProjectId:user.enterpriseProjectId},function(res){
					if(res.code=='0'){
						if(!res.data){
							actionSign()
						}else{
							actionHasSign()
						}
					}
				},false,'isSubmitSafetyRing','post')
				
			}
		})
		var imgload = function(){
				  var tu = $('#loadtu');
				  tu.remove();
		}
		var old_back = mui.back
		mui.back = function(){
			mui.fire(plus.webview.currentWebview().opener(),'reload',false)
			old_back()
		}
	</script>
</html>
